<template>
  <div class="singer-detail">
    <MusicList :title="sessionSinger.name" :pic="sessionSinger.pic" :songs="songs" :loading="loading"/>
  </div>
</template>

<script>
import { getSingerDetail } from '../service/singer'
import { processSongs } from 'service/song'
import MusicList from 'components/music-list/music-list'
export default {
    name: 'singer-detail',
    components: {
      MusicList
    },
    props: {
      singer: Object
    },
    data () {
      return {
        songs: [],
        loading: false
      }
    },
    computed: {
      sessionSinger() {
        let res = []
        const singer = this.singer
        if (singer) {
          res = singer
        } else {
          const cachedSinger = JSON.parse(sessionStorage.getItem('singer'))
          if (cachedSinger && cachedSinger.mid === this.$route.params.id) {
            res = cachedSinger
          }
        }
        return res
      }
    },
    async created() {
      try {
        if (this.sessionSinger.length === 0) {
          const path = this.$route.matched[0].path
          this.$router.push(path)
        }
        this.loading = true
        const res = await getSingerDetail(this.sessionSinger)
        this.songs = await processSongs(res.songs)
      } catch (err) {
        console.error(err)
      } finally {
        this.loading = false
      }
    }
}
</script>

<style lang="scss" scoped>
    .singer-detail {
        position: fixed;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: $color-background;
    }
</style>
